<template>
  <div class="hos_page">
    <user-card
      :islogin="true"
      :isbind="true"
      style="margin-bottom: 0.8125rem"
    ></user-card>
    <template v-if="noData">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>无数据</div>
      </div>
    </template>
    <template v-else>


    <div class="bill_box">
      <div class="item" v-for="(item, index) in inpList" @click="goDetai(item)">
        <img src="@/assets/img/right.png" alt="" class="bill_box_img">
        <div class="bill_box_2">
          <div class="left">
            <div class="item_cell">
              <div>住院号：</div>
              <div>{{ item.patientNo }}</div>
            </div>
            <div class="item_cell">
              <div>流水号：</div>
              <div>{{ item.patientCode }}</div>
            </div>
            <div class="item_cell">
              <div>就诊科室：</div>
              <div>{{ item.patientDept }}</div>
            </div>
            <div class="item_cell">
              <div>就诊医生：</div>
              <div>{{ item.patientDoctor }}</div>
            </div>
            <div class="item_cell">
              <div>住院类型：</div>
              <div>{{ item.patientPact }}</div>
            </div>
            <div class="item_cell">
              <div>总 费 用 ：</div>
              <div>¥{{ item.patienttotCost }}</div>
            </div>
            <div class="item_cell">
              <div>统筹费用：</div>
              <div>¥{{ item.patientpubCost }}</div>
            </div>
            <div class="item_cell">
              <div>自费费用：</div>
              <div style="color:red">¥{{ item.patientownCost }}</div>
            </div>
            <div class="item_cell">
              <div>卡支付费用：</div>
              <div style="color:red">¥{{ item.patientpayCost }}</div>
            </div>
            <div class="item_cell">
              <div>入院时间：</div>
              <div>{{ item.patientinDate }}</div>
            </div>
            <div class="item_cell">
              <div>出院时间：</div>
              <div>{{ item.patientoutDate }}</div>
            </div>
            <div class="item_cell">
              <div>住院状态：</div>
              <div>{{ item.patientinState }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    </template>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";

import {getInpatientInMainInfo} from "@/api/api";

export default {
  components: {
    userCard,
  },
  data() {
    return {
      noData: true,
      inpList: [],
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    this.GetInptList();
  },
  methods: {
    // 获取患者住院列表
    GetInptList() {
      var data = {
        hosId: "2001",
        operIdcardNo: this.userInfo.idNo,
        inpatientNo: "",
        patientName: ""
      };
      getInpatientInMainInfo(data).then((res) => {
        if (res.code == 200) {
          if (Object.prototype.toString.call(res.data.patientInfo) === "[object Array]") {
            console.log('value是数组');
            this.inpList = res.data.patientInfo;
            this.inpList.reverse();
          } else {
            if (res.data != "") {
              this.inpList.push(res.data.patientInfo);
            }
          }

          if (this.inpList.length >0 ) {
            this.noData = false;
          }


        }
      });
    },
    goDetai(item) {
      this.$router.push({
        path: "/hospital_records_detail",
        query: {
          inpatientSerialNo: item.patientCode
        }
      })
    },
  },
  destroyed() {
  },
};
</script>
<style scoped>
.hos_page {
  height: 100vh;
  overflow: hidden;
}

.bill_box {
  width: 100%;
  height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-bottom: 2rem;

}

.bill_box .item {
  width: calc(100% - 2rem);
  margin: 0 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e7ecf5;

  position: relative;
}

.bill_box .item:last-of-type {
  border: none;
}

.bill_box .item .item_cell {
  display: flex;
  align-items: center;
}

.bill_box .item .item_cell > div:nth-of-type(1) {
  width: 8.5rem;
  color: #a4adbe;
  line-height: 1.875rem;
}

.bill_box .item .item_cell > div:nth-of-type(2) {
  width: calc(100% - 5rem);
  line-height: 1.875rem;
}

.bill_box_img {
  width: 0.5rem;
  height: 0.8125rem;
  position: absolute;
  top: calc((100% - 0.8125rem) / 2);
  right: 1rem;
}

.bill_box .bill_box_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill_box .bill_box_2 .left {
  width: calc(100% - 2rem);
  /*height: 5.625rem;*/
  display: flex;
  /* align-items: center; */
  justify-content: space-around;
  flex-flow: column;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
